<!DOCTYPE html>
<html>
<head>
    <title>服务器连接测试</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>音乐服务器测试</h1>
    <div id="status">测试中...</div>
    <br>
    <button onclick="testConnection()">测试连接</button>
    <button onclick="testUpload()">测试上传</button>
    
    <div id="upload-section" style="margin-top: 20px;">
        <h3>音频文件上传测试</h3>
        <input type="file" id="audioFile" accept="audio/*">
        <input type="text" id="title" placeholder="歌曲标题" value="测试歌曲">
        <input type="text" id="artist" placeholder="艺术家" value="测试艺术家">
        <button onclick="uploadAudio()">上传音频</button>
        <div id="upload-result"></div>
    </div>

    <script>
        const API_URL = 'http://localhost:3000';
        
        async function testConnection() {
            const statusDiv = document.getElementById('status');
            try {
                statusDiv.innerHTML = '正在测试连接...';
                
                // 测试根路径
                const response = await fetch(API_URL + '/');
                const data = await response.json();
                
                statusDiv.innerHTML = `
                    <div style="color: green;">✓ 服务器连接成功</div>
                    <div>消息: ${data.message}</div>
                    <div>时间: ${data.timestamp}</div>
                `;
                
                // 测试健康检查
                const healthResponse = await fetch(API_URL + '/health');
                const healthData = await healthResponse.json();
                
                statusDiv.innerHTML += `
                    <div style="color: green;">✓ 健康检查通过</div>
                    <div>状态: ${healthData.status}</div>
                    <div>运行时间: ${healthData.uptime}秒</div>
                `;
                
            } catch (error) {
                statusDiv.innerHTML = `<div style="color: red;">✗ 连接失败: ${error.message}</div>`;
            }
        }
        
        async function testUpload() {
            try {
                const response = await fetch(API_URL + '/api/upload/audio', {
                    method: 'OPTIONS'
                });
                document.getElementById('status').innerHTML += `
                    <div style="color: blue;">上传路由测试: ${response.status}</div>
                `;
            } catch (error) {
                document.getElementById('status').innerHTML += `
                    <div style="color: red;">上传路由测试失败: ${error.message}</div>
                `;
            }
        }
        
        async function uploadAudio() {
            const fileInput = document.getElementById('audioFile');
            const titleInput = document.getElementById('title');
            const artistInput = document.getElementById('artist');
            const resultDiv = document.getElementById('upload-result');
            
            if (!fileInput.files[0]) {
                resultDiv.innerHTML = '<div style="color: red;">请选择音频文件</div>';
                return;
            }
            
            const formData = new FormData();
            formData.append('audio', fileInput.files[0]);
            formData.append('title', titleInput.value);
            formData.append('artist', artistInput.value);
            
            try {
                resultDiv.innerHTML = '<div>正在上传...</div>';
                
                const response = await fetch(API_URL + '/api/upload/audio', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.code === 0) {
                    resultDiv.innerHTML = `
                        <div style="color: green;">✓ 上传成功</div>
                        <div>文件名: ${data.data.filename}</div>
                        <div>访问路径: ${data.data.audioUrl}</div>
                        <div>文件大小: ${(data.data.size / 1024 / 1024).toFixed(2)} MB</div>
                        <audio controls style="width: 100%; margin-top: 10px;">
                            <source src="${API_URL}${data.data.audioUrl}" type="audio/mpeg">
                        </audio>
                    `;
                } else {
                    resultDiv.innerHTML = `<div style="color: red;">上传失败: ${data.message}</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<div style="color: red;">上传错误: ${error.message}</div>`;
            }
        }
        
        // 页面加载时自动测试连接
        window.onload = testConnection;
    </script>
</body>
</html>